<template>
  <div class="searchBox">
    <!-- 装饰 -->
    <div class="inner-text" v-show="props.type === 'text'">{{ props.innerText }}</div>
    <!-- 实用 -->
    <div class="box" v-show="props.type === 'input'">
      <van-search class="value" :show-action="!props.isShow" @clear="reset" v-model="searchValue" @input="receiveValue"
        @search="toShowPage" :placeholder="innerText" @cancel="toPrevPage">
      </van-search>
      <!-- <van-field class="value" @input="receiveValue" @keyup.enter="toShowPage" v-model="searchValue"
        :placeholder="innerText" />
      <div v-show="isShow">x</div> -->
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import router from '@/router';
export default defineComponent({
  name: 'searchBox'
})
</script>
<script lang="ts" setup>
import { onMounted, ref } from 'vue'
import { useRouter } from 'vue-router';
// 确定渲染内容
let props = defineProps({
  type: String,
  innerText: String,
  isShow: {
    'type': Boolean,
    'default': false,
    'required': false
  }
})
// 真正输入内容时把数据发给父组件
let emit = defineEmits(['getWords', 'toSearchPage', 'reset'])
const searchValue = ref('' || useRouter().currentRoute.value.query.keyword as string)
// 关键词发给父组件
const receiveValue = () => {
  emit('getWords', searchValue.value)
}
// 输入关键词切换页面
const toShowPage = () => {
  // console.log('事件触发', searchValue.value);
  if (searchValue.value === undefined || searchValue.value === '' && searchValue.value.trim() === '') { return }
  emit('toSearchPage', searchValue.value)
}

// 重置状态
const reset = () => {
  emit('reset')
}

// 上一个页面
const toPrevPage = () => {
  router.go(-1)
}
</script>

<style lang="less" scoped>
.searchBox {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  width: 100%;
  line-height: 28px;
  font-size: 14px;
  border-radius: 5px;

  .inner-text {
    background-color: #ededed;
  }

  .icon {
    margin-right: 5px;
    font-size: 15px;
  }

  .box {
    display: flex;
    justify-content: space-between;
    height: 100%;

    :deep(.value) {
      background-color: transparent;
      box-sizing: border-box;
    }

    :deep(.van-search__action) {
      padding: 0 0 0 .3rem;
      width: 40px;
    }

    :deep(.van-field__value) {
      width: 270px;
    }
  }
}
</style>
